<template>
	<view class="list">
		<view class="row" >
			<view class="type">{{orderData.status_description}}</view>
			<view class="order-info" @click="goDetail(orderData)">
				<view class="left">
					<image :src="orderData.goods_thumb"></image>
				</view>
				<view class="right">
					<view class="name">
						{{orderData.goods_name}}
					</view>
					<view class="spec">{{orderData.attr_value_str}}</view>
					<view class="price-number">
						￥<view class="price">{{orderData.goods_amount}}</view>
						x<view class="number">{{orderData.goods_num}}</view>
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="number">共{{orderData.goods_num}}件商品</view>
				<view class="sum">合计￥<view class="price">{{orderData.payable_amount}}</view>
				</view>
				<view class="nominal">(含运费 ￥{{orderData.shipping_fee}})</view>
			</view>
			<view class="btns">
				<block v-if="status=='0'">
					<view class="default" @tap="cancelOrder(orderData.id)">取消订单</view>
					<view class="pay" @tap="toPayment(orderData.id)">付款</view>
				</block>
				<block v-if="status=='1'">
					<view class="pay" @tap="toPayment(orderData.id)">付款</view>
					<view class="pay" @tap="Applyreturns(orderData)">我要退款</view>
				</block>
				<block v-if="status=='2'">
					<view class="default" @tap="showLogistics(orderData.id)">查看物流</view>
					<view class="pay" @tap="Comfirmreceipt(orderData.id)">确认收货</view>
					<view class="pay" @tap="Applyreturns(orderData.id)">我要退款</view>
				</block>
				<block v-if="status=='3'">
					<view class="default" @tap="evaluation(orderData.id)">评价</view>
					<view class="default">再次购买</view>
				</block>
				<block v-if="status=='completed'">
					<view class="default">再次购买</view>
				</block>
				<block v-if="status=='4'">
					<view class="default" @tap="checkSchedule(orderData)" >查看进度</view>
					<view class="default" @tap="fillLogistics(orderData.id)" >填写物流</view>
					<view class="pay" @tap="cancelRefunds(orderData.id)" v-if="orderData.shipping_status == 3">取消退货</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				currentIndex:"",
				status:0,//0:待付款,1:待发货，2:待收货，3:待评价，4:退款货，5:订单取消，6:订单完成;7:订单无效
				orderstatus:"",
			};
		},
		props:{
			orderData:Object,
			tabbarIndex:[Number,String],
			isupdata:{
				type:[Boolean],
				defalut:false
			}
		},
		computed: {
			hasNetwork(){
				return this.$store.state.isConnected
			}
		},
		created(){
			that = this;
			this.currentIndex = this.tabbarIndex
			this.initData();
		},
		methods:{
			initData(){
				let orderData = this.orderData;
				this.orderstatus = orderData.order_status
				/* order_status
					0提交,1已支付,2已取消,3无效,4已收货订单完成,5退货中,6退货完成
				   shipping_status商品状态
				    0未发货,1已发货,2已收货,3退货中,4退货完成
				   pay_status
				    0未付款;1付款中;2已付款
			    */
				if(orderData.order_status==1){ //1已支付
					if(orderData.shipping_status==0){ //待发货
						orderData.status_description = "等待商家发货";
						this.status = 1;
					}
					if(orderData.shipping_status==1){ //待收货
						orderData.status_description = "商家已发货"
						this.status = 2
					}
					if(orderData.shipping_status==2){ //待评价
						orderData.status_description = "等待用户评价"
						this.status = 3
					}
					if(orderData.shipping_status==4){
						orderData.status_description = "订单已完成"
						this.status = 6
					}
				}else if(orderData.order_status==2){ 
					orderData.status_description = "订单已取消"
					this.status = 5;
				}else if(orderData.order_status==3){ 
					orderData.status_description = "订单无效";
					this.status = 7;
				}else if(orderData.order_status==5){ //退货中
					this.status = 4;
					if(orderData.shipping_status==3){
						orderData.status_description = "商品退货处理中"
					}
					if(orderData.shipping_status==4){
						orderData.status_description = "退货完成"
					}
				}else{
					orderData.status_description = "等待付款";
					this.status = 0
				}
			},
			/* 取消订单 */
			cancelOrder(oid) {
				uni.showModal({
					title: '取消订单',
					content: '确定取消此订单？',
					success: (res) => {
						if (res.confirm) {
							that.$https.POST({
								url:'/order/closeOrder',
								data:{
								  oid: oid,
								},
								success(res){
									that.$showToast("订单取消成功")
									that.$emit('cancelOrder',oid)
								}
							})
						} else if (res.cancel) {
							
						}
					}
				});
			},
			/* 付款 */
			toPayment(oid) {
				//本地模拟订单提交UI效果
				uni.showModal({
					title: '支付',
					content: '确定支付此订单？',
					success: (res) => {
						if (res.confirm) {
							console.log(oid)
							that.$showToast("支付成功");
							that.$emit('payOrder',oid)
							// that.$https.POST({
							// 	url:'/goodsPay/pay',
							// 	data:{
							// 	  oid: oid,
							// 	},
							// 	success(res){
							// 		that.$showToast("支付成功");
							// 		that.$emit('payOrder',oid)
							// 	}
							// })
						}
					}
				})
			},
			/* 查看物流 */
			showLogistics(oid) {
				uni.navigateTo({
					url: "/pages/user/order_list/order/logistics?oid"+oid
				})
			},
			/* 确认收货 */
			Comfirmreceipt(oid) {
			
			},
			/* 申请退款 */
			Applyreturns(oid) {
				uni.navigateTo({
					url: './order/apply_returns?oid=' + oid
				})
			},
			/* 评价 */
			evaluation(oid) {
				uni.navigateTo({
					url: "./order/evaluation"
				})
			},
			/* 退款详情 */
			checkSchedule(row) {
				let oid = row.id;
				let goodsmsg = encodeURIComponent(JSON.stringify(row));
				uni.navigateTo({
					url: "./order/return_schedule?goodsmsg=" + goodsmsg
				})
			},
			/* 填写物流 */
			fillLogistics(oid) {
				uni.navigateTo({
					url: "./order/fill_logistics"
				})
			},
			/* 订单详情 */
			goDetail(row) {
				let oid = row.id;
				let orderstatus = row.order_status;
				// if (orderstatus == 5) {
				// 	uni.navigateTo({
				// 		url: "./order/return_schedule?oid="+oid
				// 	})
				// } else {
					uni.navigateTo({
						url: "./order/order_detail?oid="+oid
					})
				// }
			},
			/* 取消退货 */
			cancelRefunds(oid){
				
			},
			errimg(e){
				let index = e.target.dataset.errindex
				let errimg = "/static/img/noorder.png";
				this.listData[index].goods_thumb = errimg
			},
			/* 提醒发货 */
			remindDeliver(row) {
				uni.showToast({
					title: '已提醒商家发货'
				})
			},
		},
		destroyed() {
		},
		mounted() {
			// console.log('mounted')
		},
		watch:{
			tabbarIndex(newValue,oldValue){
				if(newValue!=oldValue){
					this.currentIndex=newValue
				}
			}
		}
	}
</script>

<style lang="scss">
	.list {
		width: 94%;
		margin: 0 auto;
		.row {
			width: calc(100% - 40upx);
			padding: 10upx 20upx;
			border-radius: 10upx;
			background-color: #fff;
			margin-bottom: 20upx;
	
			.type {
				font-size: 26upx;
				color: $color1;
				height: 50upx;
				display: flex;
				align-items: center;
			}
	
			.order-info {
				width: 100%;
				display: flex;
	
				.left {
					flex-shrink: 0;
					width: 25vw;
					height: 25vw;
	
					image {
						width: 25vw;
						height: 25vw;
						border-radius: 10upx;
					}
				}
	
				.right {
					width: 100%;
					margin-left: 10upx;
					position: relative;
	
					.name {
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
	
					.spec {
						color: #a7a7a7;
						font-size: 22upx;
	
					}
	
					.price-number {
						position: absolute;
						bottom: 0;
						width: 100%;
						display: flex;
						justify-content: flex-end;
						font-size: 22upx;
						color: #333;
						display: flex;
						align-items: flex-end;
	
						.price {
							font-size: 24upx;
							margin-right: 5upx;
						}
	
					}
				}
			}
	
			.detail {
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				height: 60upx;
				font-size: 26upx;
	
				.sum {
					padding: 0 8upx;
					display: flex;
					align-items: flex-end;
	
					.price {
						font-size: 30upx;
					}
				}
	
			}
	
			.btns {
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
	
				view {
					min-width: 120upx;
					height: 50upx;
					padding: 0 20upx;
					border-radius: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28upx;
					margin-left: 20upx;
				}
	
				.default {
					border: solid 1upx #ccc;
					color: #666;
				}
	
				.pay {
					border: solid 1upx $color1;
					color: $color1;
				}
			}
		}
	}
</style>
